<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>选择收货地址</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		.address-list {
			background-color: #FFFFFF;
		}

		.address-details {
			padding-top: .4rem;
			font-size: .7rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			line-height: 0.875rem;
		}

		#moren {
			color: #FF3862;
		}

		.aui-btn-block {
			display: inline-block;
			width: 17.25rem;
			height: 1.95rem;
			line-height: 1.95rem;
			color: #FFFFFF;
			background: #005A93;
			border-radius: 0.3rem;
			font-size: 0.75rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			margin: .25rem 0;
			height: 2.3rem;
			line-height: 2.3rem;
		}


		.btn {
		 text-align: center;

			width: 100%;

			font-size: 0.7rem;
			margin-top: 2rem;
			transition: all 0.1s ease-out;
		}

		.address {
			display: inline-block;
			float: left;
			padding-right: .75rem;
			font-size: .75rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(34, 34, 34, 1);

		}

		.adressList {
			position: relative;
			padding:1rem 0
			
		}

		.line {
			width: 0.2rem;
			height: 100%;
			background: #005A93;
			position: absolute;
			left: -0.75rem;
			top: 0
		}

		.aui-btn:active {
			color: #fff;
			background-color: rgba(0, 90, 147, 0.8);
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<div class="" style="padding-left:0.75rem;padding-right:0.75rem;background:#ffffff;margin-top:0.6rem">
			<div v-for="vo in info" class="adressList"
				style="display:flex;padding:0.8rem 0 0.75rem 0;background:#ffffff;border-bottom:0.05rem solid #D9D9D9;">
				<div tapmode @click="next(vo)" class=""
					style="width:100%;box-sizing: border-box;">
					<div class="" style="margin-bottom:0.4rem;">
						<span
							style="font-size:0.75rem;font-family:PingFangSC-Medium;font-weight:500;color:rgba(34,34,34,1);margin-right:1.05rem;line-height:1.05rem;">{{vo.username}}</span>
						<span
							style="font-size:0.75rem;font-family:PingFangSC-Medium;font-weight:500;color:rgba(34,34,34,1);margin-right:0.65rem;line-height:1.05rem;">{{vo.mobile}}</span>
						<span v-if="vo.is_default=='1'"
							style="display:inline-block;width:2rem;height:0.9rem;background:#005A93;border-radius: 0.1rem	;font-size:0.55rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(255,255,255,1);text-align:center;line-height:0.9rem;margin-top:0.3rem">默认</span>

					</div>
					<div class="" style="font-size:0.7rem;font-family:PingFangSC-Regular;font-weight:400;color:#333;">
						{{vo.province_name+vo.city_name+vo.area_name+vo.detailed_address}}
					</div>
					<div v-if="vo.is_default=='1'" class="line"></div>
				</div>
				
				<!-- <div class="" style="align-self:center;">
							<span tapmode onclick="open_win('address_list','../my/address_list.html',false)" >
									<img src="../../image/btn/btn-edit-z.png" style="width:1rem;height:1rem;margin-left:0.75rem;"/>
							</span>
					</div> -->
			</div>
		</div>
	</div>
	<!-- <div class="btn" tapmode onclick="open_win('address_new','../my/address_new.html',false)"  style="background:#ffffff;">
			<div class="aui-btn aui-btn-block">
				新建地址
			</div>
		</div> -->

	<div id="aui-footer" class="btn" tapmode onclick="open_win('address_new','../my/address_new.html',false)">
		<div class="aui-btn aui-btn-block ">
			新增地址
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			info: []
		},
		methods: {
			get_list: function () {
				get_data('api/Address/addressList', {
					token: $api.getStorage('token')
				}, function (ret) {
					if (ret.status) {
						vm.info = ret.data
					}
				})
			},
			next: function (el) {
				send_event('address_choice', {
					address: el
				})
				delay_close()
			}
		}
	})
	apiready = function () {
		vm.get_list()
		add_event('address_change', function (ret) {
			vm.get_list()
		})
	}
</script>

</html>